<template>
	<view class="power-card">
		<!-- 卡片头部 -->
		<view class="card-header bg-bor dis-ai">
			<view class="status-indicator"></view>
			<text class="title">{{ data.title }}</text>

		</view>

		<view class="divider"></view>

		<!-- 卡片主体 -->
		<view class="card-body dis-fw bg-bor">
			<!-- 第一组指标 -->
			<view class="metric-group">
				<view class="metric-item dis-fc">
					<view class="metric-label">
						<uni-icons type="bolt" size="18" color="#3a7bd5"></uni-icons>
						<text>Voltage L1-L2</text>
					</view>
					<view class="metric-value dis-jc-b">
						<text class="value">{{ data.power }}</text>
						<text class="unit">COS</text>
					</view>
				</view>

				<view class="metric-item dis-fc">
					<view class="metric-label">
						<uni-icons type="wave-square" size="18" color="#00d2ff"></uni-icons>
						<text>Voltage L1-L3</text>
					</view>
					<view class="metric-value dis-jc-b">
						<text class="value">{{ data.powerFactor1 }}</text>
						<text class="unit">COS</text>
					</view>
				</view>

				<view class="metric-item dis-fc">
					<view class="metric-label">
						<uni-icons type="plug" size="18" color="#7b4397"></uni-icons>
						<text>Voltage L1</text>
					</view>
					<view class="metric-value dis-jc-b">
						<text class="value">{{ data.voltage1 }}</text>
						<text class="unit">V</text>
					</view>
				</view>
			</view>

			<!-- 第二组指标 -->
			<view class="metric-group">
				<view class="metric-item dis-fc">
					<view class="metric-label">
						<uni-icons type="tachometer" size="18" color="#DD2476"></uni-icons>
						<text>功率</text>
					</view>
					<view class="metric-value dis-jc-b">
						<text class="value">{{ data.power1 }}</text>
						<text class="unit">KW</text>
					</view>
				</view>

				<view class="metric-item dis-fc">
					<view class="metric-label">
						<uni-icons type="percentage" size="18" color="#FF512F"></uni-icons>
						<text>功率因数</text>
					</view>
					<view class="metric-value dis-jc-b">
						<text class="value">{{ data.powerFactor }}</text>
						<text class="unit">COS</text>
					</view>
				</view>

				<view class="metric-item dis-fc">
					<view class="metric-label">
						<uni-icons type="sliders" size="18" color="#4776E6"></uni-icons>
						<text>电压设定</text>
					</view>
					<view class="metric-value dis-jc-b">
						<text class="value">{{ data.voltage }}</text>
						<text class="unit">V</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { computed } from 'vue'

	interface PowerData {
		title : string
		power : number
		power1 : number
		powerFactor : number
		powerFactor1 : number
		voltage : number
		voltage1 : number
	}

	const props = defineProps<{
		data : PowerData
	}>()
</script>

<style lang="scss">
	.power-card {
		overflow: hidden;
		margin-bottom: 24rpx;

		.card-header {
			padding: 24rpx 32rpx;
			// background: linear-gradient(135deg, #3a7bd5, #00d2ff);
			color: white;
			position: relative;

			.status-indicator {
				width: 30rpx;
				height: 30rpx;
				border-radius: 50%;
				margin-right: 16rpx;
				transition: background-color 0.3s;
				background-color: $uni-color-paragraph;
			}

			.title {
				font-size: 32rpx;
				font-weight: 600;
				flex: 1;
			}

			.max-power-badge {
				background: rgba(255, 255, 255, 0.2);
				padding: 6rpx 12rpx;
				border-radius: 100rpx;
				font-size: 24rpx;
			}
		}



		.card-body {
			padding: 24rpx;

			.metric-group {
				flex: 1;
				min-width: 330rpx;
				padding: 8rpx 18px;

				&:first-child {
					border-right: 1rpx dashed #f0f0f0;
				}

				.metric-item {
					color: #fff;
					padding: 16rpx 0;
					border-bottom: 1rpx dashed #f0f0f0;

					&:last-child {
						border-bottom: none;
					}

					.metric-label {
						display: flex;
						align-items: center;
						font-size: 28rpx;

						uni-icons {
							margin-right: 8rpx;
						}
					}

					.metric-value {
						margin-top: 16rpx;
						display: flex;
						align-items: baseline;

						.value {
							font-size: 32rpx;
							font-weight: 600;
							// color: #333;
							margin-right: 8rpx;
						}

						.unit {
							font-size: 24rpx;
							// color: #999;
						}
					}
				}
			}
		}
	}
</style>